<template>
  <div class="actors">
    <!-- 导演-->
    <div class="director">
      <div class="to-flex margin-bottom">
        <sn-text text="导演" :font-size="16" class="margin-bottom margin-right"/>
        <sn-text text="（" font-color="#999"/>
        <sn-text :number="Number(directorNumbers)" font-color="#999"/>
        <sn-text text="）" font-color="#999"/>
      </div>
      <actor-template
          :actor-image="directorImage"
          :actor-name="directorName"/>
    </div>
    <!-- 演员-->
    <div>
      <div class="to-flex margin-bottom">
        <sn-text text="演员" :font-size="16" class="margin-bottom margin-right"/>
        <sn-text text="（" font-color="#999"/>
        <sn-text :number="Number(actorNumbers)" font-color="#999"/>
        <sn-text text="）" font-color="#999"/>
      </div>
      <div v-for="i in getRows" class="to-flex">
        <actor-template
            :actor-name="actorNames[5*(i-1)]"
            :actor-role="actorRoles[5*(i-1)]"
            :actor-image="actorImages[5*(i-1)]" v-if="[5*(i-1)] < actorImages.length "/>
        <actor-template
            :actor-name="actorNames[1+5*(i-1)]"
            :actor-role="actorRoles[1+5*(i-1)]"
            :actor-image="actorImages[1+5*(i-1)]" v-if="[1+5*(i-1)] < actorImages.length "/>
        <actor-template
            :actor-name="actorNames[2+5*(i-1)]"
            :actor-role="actorRoles[2+5*(i-1)]"
            :actor-image="actorImages[2+5*(i-1)]" v-if="[2+5*(i-1)] < actorImages.length "/>
        <actor-template
            :actor-name="actorNames[3+5*(i-1)]"
            :actor-role="actorRoles[3+5*(i-1)]"
            :actor-image="actorImages[3+5*(i-1)]" v-if="[3+5*(i-1)] < actorImages.length "/>
        <actor-template
            :actor-name="actorNames[4+5*(i-1)]"
            :actor-role="actorRoles[4+5*(i-1)]"
            :actor-image="actorImages[4+5*(i-1)]" v-if="[4+5*(i-1)] < actorImages.length "/>
      </div>
    </div>
  </div>
</template>

<script>
import ActorTemplate from "@/views/movie/movie_detail/template/ActorTemplate";

export default {
  name: "Actors",
  components: {
    ActorTemplate
  },
  computed: {
    getRows() {
      return this.actorImages.length % 5 === 0 ? this.actorImages.length / 5 : parseInt(this.actorImages.length / 5) + 1
    }
  },
  data() {
    return {
      directorNumbers: 1,
      directorName: '',
      actorNumbers: '',
      directorImage: '',
      actorImages: [],
      actorNames: [],
      actorRoles: []
    }
  },
  methods: {
    getAllActors() {
      let movieId = this.$store.state.movieDetailInfo.movieId
      console.log(movieId)
      this.$http({
        url: `/web/movie/info/actors/${movieId}`,
        method: 'get'
      }).then(({data}) => {
        console.log(data.data)

        let info = data.data
        let actors = info.movieActors
        this.actorNumbers = actors.length
        for (let i = 0; i < actors.length; i++) {
          this.actorImages.push(actors[i].image)
          this.actorNames.push(actors[i].name)
          this.actorRoles.push(actors[i].role)
        }
        let director = info.director
        this.directorImage = director.image
        this.directorName = director.name
      })
    }
  },
  created() {
    this.getAllActors()
  }
}
</script>

<style scoped>
.actors {
  margin-top: 50px;
}

.director {
  margin-bottom: 50px;
}

.director-name {
  margin-top: 5px;
  text-align: center;
  font-size: 14px;
  width: ;
}
</style>